<template>
  <div>
    <div>
      <!-- <Select placeholder="本站搜书名" v-model="searchType" style="width:100px">
        <Option value="0">本站搜书名</Option>
        <Option value="1">本站搜作者</Option>
        <Option value="2">网络搜索</Option>
      </Select>-->
      <Input
        v-model="searchKey"
        placeholder="请输入搜索内容"
        style="width: auto"
        @on-search="searchLoacl"
        search
      />
    </div>
    <br />
    <template v-if="resultType === 'epubee'">
      <Table border stripe :loading="loading" :columns="columns2" :data="ebooks">
        <template slot-scope="{ row, index }" slot="action">
          <div>
            <Button @click="details(row)">查看详情</Button>
            <Button style="margin-left: 20px;" @click="handleAddTask(row, index)">保存到我的任务</Button>
          </div>
        </template>
      </Table>
      <!-- <Row >
      <Col span="2" v-for="b in ebooks" :key="b.bid">
        <Card style="width: 95px; margin: 15px;">
          <img :src="b.img" style="width: 58px; height: 80px;" :title="b.Title" />
          <Button @click="handleSave(b)">保存</Button>
        </Card>
      </Col>
      <Spin size="large" fix v-if="loading1"></Spin>
      </Row>-->
    </template>
    <template v-if="resultType === 'local'">
      <Table border stripe :loading="loading" :columns="localBooks" :data="books">
        <template style="width: 150px;" slot-scope="{ row, index }" slot="action">
          <div>
            <Button @click="details(row)">查看详情</Button>
            <Button style="margin-left: 20px;" @click="saveToMyBookShelf(row, index)">存入书架</Button>
          </div>
        </template>
      </Table>
    </template>
    <br />
    <!-- <Page :total="filteredBooks.length" show-sizer show-elevator /> -->
    <BookDetails
      :setVisiable="(v) => {this.detailsShow = v}"
      :isShow="detailsShow"
      :bookId="detailsId"
    />
    <Divider />
    <Card style="margin: 10px; font-size: 16px; color: green;">
      <Button @click="editBook" slot="title">
        <Icon type="ios-book" />
        添加书籍</Button>
      <span>
        <Icon type="md-arrow-dropright" />您可以分享优质的书籍资源到系统
        <Icon type="md-arrow-dropright" />或添加想要的书籍到系统等待他人分享
      </span>
      <p></p>
      <UserAddOrEditBook
        :setVisiable="(v) => {this.editingBookShow = v}"
        :isShow="editingBookShow"
        title="添加书籍"
      />
    </Card>
    <Divider />
    <Button @click="() => { netSearch = true }" v-if="!netSearch">点击开启网络搜书</Button>
    <NetBooks v-if="netSearch" />
  </div>
</template>

<script>
import { addTask, searchLocalBook } from '../api/book'
import { addBookToMyBookShelf } from '../api/bookShelf'
import BookDetails from './BookDetails'
import UserAddOrEditBook from './UserAddOrEditBook'
import NetBooks from './NetBooks'

export default {
  name: 'home',

  components: {
    BookDetails,
    UserAddOrEditBook,
    NetBooks
  },

  data () {
    return {
      netSearch: false,
      detailsShow: false,
      detailsId: '',
      editingBookShow: false,
      ebooks: [],
      searchType: 0,
      resultType: '',
      books: [],
      searchKey: '',
      filteredBooks: [],
      localBooks: [
        {
          title: 'Name',
          key: 'name',
          width: 'auto'
        },
        {
          title: 'Author',
          key: 'author',
          width: 200
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action',
          width: 240
          // render: this.renderDownloadButton
        }
      ],
      columns2: [
        {
          title: 'Name',
          key: 'Title'
        },
        {
          title: 'Author',
          key: 'Author',
          width: 200
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action',
          width: 260
          // render: this.renderDownloadButton
        }
      ],
      loading: false
    }
  },

  computed: {
    query () {
      switch (parseInt(this.searchType)) {
        case 1:
          return {
            qs: this.searchKey,
            qsType: 'aname',
            type: 'local'
          }
        case 2:
          return {
            qs: this.searchKey,
            type: 'epubee'
          }
        default:
          return {
            qs: this.searchKey,
            qsType: 'bname',
            type: 'local'
          }
      }
    }
  },

  methods: {
    async handleDownload (row) {
      window.open(
        `/api/book/download?id=${row._id}&token=${this.$store.state.accessToken}`,
        '_blank'
      )
    },

    async details (row) {
      this.detailsId = row._id
      this.detailsShow = true
    },

    editBook () {
      this.editingBookShow = true
    },

    async handleAddTask (book) {
      const b = {
        bid: book.BID,
        cover: book.Cover,
        title: book.Title,
        author: book.Author
      }
      await addTask(b).then(() => {
        this.$Notice.success({
          title: '保存成功!',
          desc: `${b.title} 保存成功!`,
          duration: 5
        })
      })
    },

    async saveToMyBookShelf (row) {
      addBookToMyBookShelf(row._id)
        .then(res => {
          this.$Notice.success({
            title: '保存成功!',
            desc: `${res.data.bookName} 保存成功!`,
            duration: 5
          })
        })
        .catch(err => {
          this.$Notice.error({
            title: '保存失败',
            desc: err.response.data.message,
            duration: 5
          })
        })
    },

    async searchLoacl () {
      if (this.searchKey === '') {
        this.books = []
        return
      }
      this.loading = true
      this.resultType = this.query.type
      this.query.pageSize = 50
      const res = await searchLocalBook({
        qs: this.searchKey,
        page: 0,
        pageSize: 50
      })
      this.books = res.data
      this.loading = false
    }

    // async handleSearch (key) {
    //   this.loading = true
    //   this.searchKey = key
    //   this.resultType = this.query.type
    //   this.query.pageSize = 50
    //   const res = await searchBook(this.query)
    //   if (this.resultType === 'epubee' && res.data && res.data.d instanceof Array) {
    //     this.ebooks = []
    //     res.data.d.forEach(b => {
    //       b.img = `http://files.epubee.com/getCover.ashx?fpath=${b.Cover}`
    //       this.ebooks.push(b)
    //     })
    //   } else if (this.resultType === 'local' && res.data) {
    //     this.books = res.data
    //   }
    //   this.loading = false
    // }
  }
}
</script>

<style scoped>
</style>
